import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        let pieData = [
            { value: 42, name: '病危', },
            { value: 72, name: '病重', },
            { value: 621, name: '普通', },
        ];
        // 默认配色
        let colorList = ['red', 'orange', '#4af0e0'];
        let datas = pieData.map(item => {
            return {
                value: item.value && Number(item.value) || 0,
                name: item.name,
            }
        })
        let sum = datas.reduce((per, cur) => {
            if (per <= cur.value) {
                per = cur.value;
            }
            return per
        }, 0);
        sum = sum + Math.floor(sum / 10);
        let dataMAX = datas.map(item => sum);
        let option = {
            tooltip: {
                trigger: 'axis', //axis , item
                axisPointer: { type: 'shadow' }, //触发效果 移动上去 背景效果
                formatter: (params) => {
                    return params[1].marker + ' ' + params[1].name + ' ' + (params[1].value || 0)
                },
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: 10,
                top: '10%',
                containLabel: true,
            },
            xAxis: {
                show: false,
                type: 'value',
            },
            yAxis: [
                {
                    type: 'category',
                    nameGap: 3,
                    inverse: false, // 是否翻转
                    nameTextStyle: {
                        fontSize: 16,
                        color: "#3e3e3e",
                        align: "center",
                        fontWeight: '700',
                        padding: [0, 0, 0, -36]
                    },
                    axisLabel: {
                        show: true,
                        align: 'right',
                        textStyle: {
                            fontSize: 14,
                            color: '#fff',
                            rich: {
                                name: {
                                    padding: [0, 10, 0, 50],
                                    width: 150,
                                    borderWidth: 1,
                                },
                            },
                        },
                        formatter: (name) => {
                            var index = datas.map((item) => item.name).indexOf(name) + 1;
                            return [
                                // '{' + 'index' + '|' +'NO.'+ index + '}',
                                '{name|' + name + '}',
                            ].join('');
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    data: datas.map((item) => item.name),
                },
                {
                    nameGap: 5,
                    inverse: false, // 是否翻转
                    nameTextStyle: {
                        fontSize: 12,
                        color: "#fff",
                        align: "center",
                        fontWeight: '700',
                        padding: [0, -60, 0, 0]
                    },
                    type: 'category',
                    axisLabel: {
                        show: true,
                        margin: 30,//右侧y轴数字的外边距
                        textStyle: {
                            fontSize: 14,
                            color: '#fff',
                        },
                        formatter: (value) => {
                            return value
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    data: datas.map((item) => {
                        return item.value + '人' + '\t\t' + item.value / 10 + '%'
                    }),
                }
            ],
            series: [
                {
                    name: '背景',
                    type: "bar",
                    stack: '总量',
                    barGap: '-100%',
                    symbol: 'fixed',
                    itemStyle: {
                        normal: {
                            color: '#f6f8f9'
                        },
                    },
                    data: dataMAX,
                    animation: false, //关闭动画
                    barWidth: 10,
                    z: 0
                },
                {
                    name: '能源指数',
                    type: 'bar',
                    zlevel: 1,
                    label: {
                        show: false,
                        position: 'right', // 位置
                        color: '#282c34',
                        fontSize: 14,
                        distance: 10, // 距离
                        // formatter: '{c}%' // 这里是数据展示的时候显示的数据
                    }, // 柱子上方的数值
                    itemStyle: {
                        normal: {
                            barBorderRadius: 0,
                            color: (params) => {
                                return colorList[params.dataIndex]
                            },
                        },
                    },
                    barWidth: 10,
                    data: pieData.map(item => item.value),
                },
            ],
        };
        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '22vw', height: '7.8vw', maxWidth: '22vw', maxHeight: '7.8vw' }}></div>;
};

export default EChartsComponent;

